<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <!-- 单页 -->
    <div class="app-page-padding" style="height:calc(100% - 50px)">
      <div v-loading="pageLoading" class="app-rule-form">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="small" label-width="110px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="详细内容">
                <tinymce id="law-edit" ref="tinymce" v-model="ruleForm.content" :height="500" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="">
                <el-button :loading="loading" type="primary" size="small" class="fa fa-check" @click="validateSubmit(ruleForm)">
                  保存
                </el-button>
                <el-button size="small" class="fa fa-reply-all" @click="close">
                  关闭
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { add, update } from '@/mock/index'
import Tinymce from '@/components/Tinymce/index'

export default {
  name: 'FromTinymce',
  components: {
    Tinymce
  },
  data () {
    return {
      // 提交表单loading
      loading: false,
      // 页面加载完成loading
      pageLoading: false,
      // 表单
      ruleForm: {
      },
      // 验证
      rules: {
      }
    }
  },
  created () {
  },
  methods: {
    // 关闭跳转
    close () {
      this.closeView(this.$route)
    },
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交表单
    async submit (ruleForm) {
      this.loading = true
      if (this.isEdit) {
        // 编辑
        const res = await update(ruleForm)
        if (res.code === '0000') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.jumpRouterView(this.$route, { path: '/user' })
        }
      } else {
        // 增加
        const res = await add(ruleForm)
        if (res.code === '0000') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.jumpRouterView(this.$route, { path: '/user' })
        }
      }
      this.loading = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
</style>
